<template>
  <div class="product">
    <top />
    <el-main>
      <el-row :span="24" class="titleclass">
        <el-col :span="8"><p></p></el-col>
        <el-col :span="4">
          <el-input
            v-model="inputParam"
            placeholder="请输入产品名称"
          ></el-input>
        </el-col>
        <el-col :span="4">
          <el-button @click="getQueryProduct" type="primary" icon="el-icon-view"
            >查询产品</el-button
          >
        </el-col>
        <el-col :span="4"><p></p></el-col>
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-edit" @click="showAddProduct"
            >新增产品</el-button
          >
        </el-col>
      </el-row>

      <!-- 新增弹窗 -->
      <el-dialog title="新增产品" :visible.sync="addProductDialog">
        <el-form :model="productaddForm" label-width="80px">
          <!-- <el-form-item label="产品编号">
            <el-input
              v-model="productaddForm.productId"
              style="width: 220px"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="产品名称">
            <el-input
              v-model="productaddForm.productName"
              style="width: 220px"
            ></el-input>
          </el-form-item>
          <el-form-item label="产品图片">
            <el-input
              v-model="productaddForm.productImg"
              style="width: 220px"
            ></el-input>
          </el-form-item>
          <el-form-item label="设备编号">
            <el-input
              v-model="productaddForm.mechineId"
              style="width: 220px"
            ></el-input>
          </el-form-item>
          <el-form-item label="工厂编号">
            <el-input
              v-model="productaddForm.factoryId"
              style="width: 220px"
            ></el-input>
          </el-form-item>
          <el-button type="primary" @click="addProduct()">更新</el-button>
          <el-button @click="addProductDialog = false">取消</el-button>
        </el-form>
      </el-dialog>
      <!-- 产品列表 -->
      <el-table :data="productlist" style="width: 100%">
        <el-table-column prop="productId" label="产品编号" width="200">
        </el-table-column>
        <el-table-column prop="productName" label="产品名称" width="200">
        </el-table-column>
        <el-table-column prop="productImg" label="产品图片" width="200">
        </el-table-column>
        <el-table-column prop="mechineId" label="设备编号" width="200">
        </el-table-column>
        <!-- <el-table-column
          prop="factoryId"
          label="工厂编号"
          width="200">
        </el-table-column> -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 编辑产品 -->
      <el-dialog title="编辑产品" :visible.sync="updateProductDialog">
        <el-form :model="productupdateForm" label-width="80px">
          <el-form-item label="产品编号">
            <el-input
              v-model="productupdateForm.productId"
              style="width: 220px"
            ></el-input>
          </el-form-item>
          <el-form-item label="产品名称">
            <el-input
              v-model="productupdateForm.productName"
              style="width: 220px"
            ></el-input>
          </el-form-item>
          <el-form-item label="产品图片">
            <el-input
              v-model="productupdateForm.productImg"
              style="width: 220px"
            ></el-input>
          </el-form-item>
          <el-form-item label="设备编号">
            <el-input
              v-model="productupdateForm.mechineId"
              style="width: 220px"
            ></el-input>
          </el-form-item>
          <el-form-item label="工厂编号">
            <el-input
              v-model="productupdateForm.factoryId"
              style="width: 220px"
            ></el-input>
          </el-form-item>
          <el-button type="primary" @click="editProduct()">更新</el-button>
          <el-button @click="updateProductDialog = false">取消</el-button>
        </el-form>
      </el-dialog>
    </el-main>
    <el-footer class="footer">
      <!-- 分页 -->
      <div class="block">
        <!-- 如果参数是我们自己定的方法要加（），如果是回调不用 -->
        <!-- <el-pagination
          background
          layout="prev, pager, next"
          :total="1000">
        </el-pagination> -->
      </div>
    </el-footer>
  </div>
</template>

<script>
// @ is an alias to /src
import Top from "@/components/Top.vue";

export default {
  name: "product",

  data() {
    return {
      inputParam: "",
      productId: this.$route.query.productId,
      productlist: [],
      productaddForm: {},
      productupdateForm: {},
      addProductDialog: false,
      updateProductDialog: false,
      // allCountNum:0,
      factoryId: this.$route.query.factoryId,
      user: {},
    };
  },
  created() {
    console.log(this.factoryId);
    this.user = this.$getSessionStorage("user");
    if (this.user != null) {
      this.getAllProduct();
    }
  },
  components: {
    Top,
  },
  methods: {
    getQueryProduct() {
      this.$axios
        .post(
          "ProductController/queryProduct",
          this.$qs.stringify({ productName: this.inputParam })
        )
        .then((value) => {
          this.productlist = value.data;
        })
        .catch((value) => {
          console.error(value);
        });
    },
    // getQueryProduct(){
    //   this.$axios.post(
    //     'ProductController/findProduct',
    //     this.$qs.stringify(
    //     )
    //   )
    // },

    getAllProduct() {
      this.$axios
        .post(
          "ProductController/findAllProductByFactoryId",
          this.$qs.stringify({ factoryId: this.factoryId })
        )
        .then((value) => {
          this.productlist = value.data;
          console.log(value.data);
        })
        .catch((value) => {
          console.error(value);
        });
    },
    showAddProduct() {
      this.addProductDialog = true;
      this.productaddForm.factoryId=this.factoryId;
    },
    handleEdit(index, row) {
      this.updateProductDialog = true;
      this.productupdateForm.productId = row.productId;
      this.productupdateForm.productName = row.productName;
      this.productupdateForm.productImg = row.productImg;
      this.productupdateForm.mechineId = row.mechineId;
      this.productupdateForm.factoryId = row.factoryId;
      this.productupdateForm = Object.assign({}, row);
    },
    addProduct() {
      if (this.productaddForm.productName == "") {
        alert("产品名称不能为空");
        return;
      }
      if (this.productaddForm.productImg == "") {
        alert("产品图片不能为空");
        return;
      }
      if (this.productaddForm.mechineId == "") {
        alert("设备编号不能为空");
        return;
      }
      if (this.productaddForm.factoryId == "") {
        alert("工厂编号不能为空");
        return;
      }
      this.$axios
        .post(
          "ProductController/saveProduct",
          this.$qs.stringify(this.productaddForm)
        )
        .then((value) => {
          if (value.data > 0) {
            alert("新增成功！");
            this.addProductDialog = false;
            this.getAllProduct();
          } else {
            alert("新增失败");
          }
        })
        .catch((value) => {
          console.error(value);
        });
    },
    editProduct() {
      this.$axios
        .post(
          "ProductController/updateProduct",
          this.$qs.stringify(this.productupdateForm)
        )
        .then((value) => {
          this.productupdateForm = value.data;
          this.$confirm("修改成功").then(() => {
            this.updateProductDialog = false;
            this.getAllProduct();
          });
        })
        .catch((value) => {
          console.error(value);
        });
    },

    handleDelete(index, row) {
      this.$confirm("确认删除？").then(() => {
        this.$message("删除成功");
        this.$axios
          .post(
            "ProductController/removeProduct",
            this.$qs.stringify({ productId: row.productId })
          )
          .then((res) => {
            this.productlist = res.data;
            this.getAllProduct();
          })
          .catch((value) => {
            console.error(value);
          });
      });
    },
  },
};
</script>

<style scoped>
.footer {
  text-align: center;
}

li {
  margin-top: 20px;
}

li div {
  display: inline;
  margin-left: 40px;
}
</style>
